<template>
  <div>
    <el-button
      type="primary"
      style="margin-left: 30px; margin-top: 30px"
      @click="openDialog"
      >新增题单</el-button
    >
    <el-button
      type="danger"
      style="margin-left: 30px; margin-top: 30px"
      v-if="multipleSelectionFlag"
      @click="multiDelete()"
      >批量删除</el-button
    >
    <el-table
      ref="multipleTable"
      :data="testbar"
      tooltip-effect="dark"
      style="width: 100%; margin-top: 20px; margin-bottom: 20px; margin-left: 30px"
      v-loading="loading"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="题单名称" width="300">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="题单描述" width="300">
        <template slot-scope="scope">
          {{ scope.row.standard.slice(0,30)+'...' }}
        </template>
      </el-table-column>
      <el-table-column label="版本" show-overflow-tooltip width="330">
        <template slot-scope="scope">
          {{ scope.row.scoring_criteria }}
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" size="mini" @click="reviseTestbar(scope.row)"></el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="deleteTestbar(scope.row.uuid)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 新增修改题单 -->
    <el-dialog :title="diffTitle" :visible.sync="dialogFormVisible">
      <el-form :model="formdata" ref="testform">
        <el-form-item label="题单名称" :label-width="formLabelWidth" size="small">
          <el-input v-model="formdata.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="题单描述" :label-width="formLabelWidth" size="small" >
          <el-input v-model="formdata.standard" autocomplete="off" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="版本" :label-width="formLabelWidth" size="small">
          <el-input v-model="formdata.scoring_criteria" autocomplete="off"></el-input>
        </el-form-item>
        <!-- <el-form-item label="新建题目" :label-width="formLabelWidth">
          <el-button type="primary" v-model="formdata.topics">请从题库中加入</el-button> -->
          <!-- <el-input
            v-model="formdata.topics.topics"
            autocomplete="off"
            type="text"
          ></el-input> -->
        <!-- </el-form-item> --> 
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="a = newTestbar()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getRandom } from "@/utils/random";
export default {
  name: "test",
  data() {
    return {
      loading: true,
      isShow: false,
      formLabelWidth: "120px",
      barformVisible: false,
      flieData: null,
      fileList: [],
      docInfo: {
        current: 1,
        keyword: "",
        size: 5,
      },
      searchform: {
        page: 1,
        number: 10,
        type: 'list',
        search: ''
      },
      dialogFormVisible: false,
      testListVisible: false,
      formdata: {
        uuid:"",
        name: "",
        list: [],
        topics: [],
        standard: "",
        scoring_criteria: "",
      },
      testbar: [],
      testlist: [],
      titleShow: false,
      multipleSelectionFlag: false,
      multipleSelection: "",
    };
  },
  mounted() {
    this.getTestbar();
    this.getTestlist();
  },
  computed: {
    diffTitle() {
      if (this.titleShow == false) {
        return "修改题单";
      } else {
        return "新增题单";
      }
    },
  },
  methods: {
        //获取题库中的题目
    async getTestlist() {
      let res = this.$store.dispatch("getTestList");
      // console.log(res);
      this.testlist = this.$store.state.test.testlist;
    },
    //获取题单
    async getTestbar() {
      let res = await this.$store.dispatch("getTestBar");
    //   console.log(res);
      if (res == "ok") {
        this.loading = false;
        this.testbar = this.$store.state.test.testbar;
      }
    },
    //获取题单内的题目
    async getSomeTestlist(data) {
      this.barformVisible = true;
      this.searchform.search = data.uuid;
      let res = await this.$store.dispatch("getAllTestList",this.searchform);
      // console.log(res);
      if (res == "ok") {
        this.testlist = this.$store.state.test.testlist;
      }
    },
    // 删除题单
    async deleteTestbar(uuid) {
      this.$confirm("此操作将删除该题单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        var arr = [uuid];
        let res = await this.$store.dispatch("deleteTestBar", arr);
        if (res == "ok") {
          this.getTestbar();
          this.$message({
            type: "success",
            message: "题单删除成功",
          });
        }
      });
    },
    // 批量删除
    async multiDelete() {
      this.multiDeleteVisible = false;
      this.$confirm("此操作将批量删除题单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        let arr = [];
        for (const item of this.multipleSelection) arr.push(item.uuid);
        // console.log(arr);
        let res = await this.$store.dispatch("deleteTestBar", arr);
        if (res == "ok") {
          this.getTestbar();
          this.$message({
            type: "success",
            message: "题单删除成功",
          });
        }
      });
    },
    // 新增题单
    async newTestbar() {
      this.loading = true;
      if (this.titleShow == true) {
        if (this.Validate() != false) {
          this.getTestlist();
          // console.log(this.testlist);
          this.formdata.list.push(this.testlist[0].uuid);
          // console.log(this.formdata)
          let res = await this.$store.dispatch("newTestBar", this.formdata);
          if (res == "ok") {
            this.getTestbar();
            this.dialogFormVisible = false;
            this.loading = false;
            this.$message({
              type: "success",
              message: "题单新增成功",
            });
          }
        }
      } else {
        // 修改
        if (this.Validate() != false) {
          let res = await this.$store.dispatch("reviseTestBar", this.formdata);
          // console.log(this.formdata)
          if (res == "ok") {
            this.getTestbar();
            this.dialogFormVisible = false;
            this.loading = false;
            this.$message({
              type: "success",
              message: "题单修改成功",
            });
          }
        }
      }
    },
    // 修改题单
    reviseTestbar(data) {
      this.dialogFormVisible = true;
      this.titleShow = false;
      const newdata = this.formdata;
      // console.log(data);
      this.formdata = { ...newdata, ...data };
    },

    openDialog() {
      //打开对话框
      this.dialogFormVisible = true;
      this.titleShow = true;
    },
    //表单验证
    Validate() {
      this.$refs.testform.validate((valid) => {
        if (!valid) {
          return false;
        } else return true;
      });
    },
    handleSelectionChange(val) {
      //   console.log(val);
      this.multipleSelectionFlag = true;
      this.multipleSelection = val;
      if (this.multipleSelection.length == 0) {
        // 如不进行判断则勾选完毕后批量删除按钮还是会在
        this.multipleSelectionFlag = false;
      }
    },

  },
};
</script>

<style>
.pagination {
  margin-top: 2px;
  margin-left: 30vw;
}
</style>
